<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职位管理</title>
    <link rel="stylesheet" href="../../../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../../../admin/css/reset.css"/>
</head>
<body class="pear-container">

<!-- 顶部查询表单 -->
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form top-search-from">

            <div class="layui-form-item">
                <label class="layui-form-label">岗位名称</label>
                <div class="layui-input-block">
                    <input type="text" name="post_name" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">岗位代码</label>
                <div class="layui-input-block">
                    <input type="text" name="post_code" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label"></label>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
                    <i class="layui-icon layui-icon-search"></i>查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
                    <i class="layui-icon layui-icon-refresh"></i>重置
                </button>
            </div>
            <div class="toggle-btn">
                <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
                <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
            </div>
        </form>
    </div>
</div>

<!--数据表格-->
<div class="layui-row layui-col-space15">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="organizationTreeContent" style="overflow: auto">
                    <ul id="dept" class="dtree" data-id="9527"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="data-table" lay-filter="data-table"></table>
                <div id="data-laypage"></div>
            </div>
        </div>
    </div>
</div>


<!-- 表格顶部工具栏 -->
<script type="text/html" id="table-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="setting-post-add">
        <i class="layui-icon layui-icon-add-1"></i>新增
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>展开
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>折叠
    </button>
</script>


<!-- 表格行工具栏 -->
<script type="text/html" id="table-bar">
    <button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="setting-post-edit">编辑</button>
    <button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="setting-post-delete">删除</button>
</script>


<!--图标-->
<script type="text/html" id="icon">
    <i class="layui-icon {{d.icon}}"></i>
</script>

<script src="../../../../component/layui/layui.js"></script>
<script src="../../../../component/pear/pear.js"></script>
<script src="../../../../lms/base64.js"></script>
<script src="../../../../lms/common.js"></script>
<script src="../../../../lms/permission.js"></script>
<script src="../../../../lms/config.js"></script>
<script>

    const PRIMARY_KEY = "post_id";
    const RESTFUL_API = lms_config.api_url + "/adminapi/setting/post";
    const DEPT_RESTFUL_API = lms_config.api_url + "/adminapi/setting/dept";

    layui.use(['table', 'treeTable', 'form', 'jquery', 'dtree', 'laypage', 'common'], function () {
        let treeTable = layui.treeTable;
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let Dtree = layui.dtree;
        let common = layui.common;
        let MODULE_PATH = "";

        let cols = [
            {
                title: '岗位名称',
                field: 'post_name',
                align: 'left',
                minwidth: 120,
                width: 200
            },
            {
                title: '图标',
                field: 'icon',
                templet: '#icon',
                width: 60,
                align: 'left',
                hide: true,
            },
            {
                title: '岗位代码',
                field: 'post_code',
                align: 'left',
                width: 110,
            },
            {
                title: '备注',
                field: 'remarks',
                align: 'left',
            },

            {
                title: '操作',
                toolbar: '#table-bar',
                align: 'left',
                width: 150
            }
        ]


        $request({
            url: DEPT_RESTFUL_API,
            type: 'GET',
            dataType: 'json',
        }).then(function (ret) {
            Dtree.render({
                elem: "#dept",
                data: ret.data,
                initLevel: "2", //默认展开层级为1
                line: true, // 有线树
                width: '100%',
                skin: "layui",
                accordion: true,
                response: {
                    treeId: "dept_id", //节点ID（必填）
                    parentId: "pid", //父节点ID（必填）
                    title: "dept_name", //节点名称（必填）
                }
            });
        }).catch(function (ret) {
            alert("出错" + ret.status + "：" + ret.responseText);
        });

        window.render = function (param = []) {
            treeTable.render({
                elem: '#data-table',
                cols: [cols],
                url: RESTFUL_API,
                skin: "line",
                where: {...param},
                tree: {
                    customName: {
                        name: 'post_name',
                        id: 'post_id',
                        pid: 'pid',
                    },
                    data: {
                        rootPid: '-1',
                        isSimpleDataL: true,
                    },
                    view: {
                        showIcon: false,
                    },
                    async: {},
                    callback: {}
                },
                parseData: function (ret) {
                    return {
                        "code": 0,
                        "msg": "",
                        "count": ret.count != undefined ? ret.count : (ret.data.length),
                        'data': ret.data
                    }
                },
                toolbar: "#table-toolbar",
                page: false,
                defaultToolbar: [{
                    title: "刷新",
                    layEvent: "refresh",
                    icon: "layui-icon-refresh",
                }, "filter", "print", "exports"]
            });
        }

        // 头部搜索栏
        form.on('submit(table-query)', function (obj) {
            let data = obj.field;
            let where = Object.keys(data).filter(function (key) {
                return data[key] !== '';
            }).reduce(function (obj, key) {
                obj[key] = data[key];
                return obj;
            }, {});
            window.render(where);
            return false;
        });

        // 绑定节点点击事件
        Dtree.on("node(dept)", function (obj) {

            if (!obj.param.leaf) {
                let $div = obj.dom;
                CommonTreet.clickSpread($div);  //调用内置函数展开节点

                let param = {};
                param.dept_id = obj.param.nodeId;
                layui.$("#dept_id").val(obj.param.nodeId)
                window.render(param);
            } else {
                let param = {};
                param.dept_id = obj.param.nodeId;
                layui.$("#dept_id").val(obj.param.nodeId)
                window.render(param);
            }
        });

        table.on('tool(data-table)', function (obj) {
            if (obj.event === 'edit') {
                window.edit(obj);
            } else if (obj.event == 'remove') {
                window.remove(obj);
            }
        })


        table.on('toolbar(data-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            } else if (obj.event === 'expandAll') {
                treeTable.expandAll("data-table", true);
            } else if (obj.event === 'foldAll') {
                treeTable.expandAll("data-table", false);
            }
        });


        window.add = function () {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: [common.isModile() ? '100%' : '800px', common.isModile() ? '100%' : '450px'],
                content: MODULE_PATH + 'add.html?operation=add'
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: [common.isModile() ? '100%' : '800px', common.isModile() ? '100%' : '450px'],
                content: MODULE_PATH + 'add.html?operation=edit&' + PRIMARY_KEY + '=' + obj.data[PRIMARY_KEY]
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该权限', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: RESTFUL_API + '/' + obj.data[PRIMARY_KEY],
                    type: 'DELETE',
                    dataType: 'json',
                    success: function (ret) {
                        layer.close(loading);
                        if (ret && ret.status == 200) {
                            layer.msg(ret.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(ret.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    },
                    error: function (ret) {
                        alert("出错" + ret.status + "：" + ret.responseText);
                    }, //表示如果请求响应出现错误，会执行的回调函数
                });
            });
        }

        window.batchRemove = function (obj) {

            //方法1：直接获得所有选择的ID
            let checkIds = common.checkField(obj, 'id');
            if (checkIds === "") {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }

            layer.confirm('确定要删除这些权限', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: DELETE_API,
                    type: 'POST',
                    headers: {Authorization: getUserInfo()["token"]},
                    data: {"data": checkIds},
                    dataType: 'json',

                    success: function (ret) {
                        layer.close(loading);
                        if (ret && ret.code == 0) {
                            layer.msg(ret.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                window.refresh()
                            });
                        } else {
                            layer.msg(ret.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    },
                    error: function (ret) {
                        alert("出错" + ret.status + "：" + ret.responseText);
                    }, //表示如果请求响应出现错误，会执行的回调函数
                });
            });
        }

        window.render();

        window.refresh = function () {
            let data = form.val('data-query');
            let where = Object.keys(data).filter(function (key) {
                return data[key] !== '';
            }).reduce(function (obj, key) {
                obj[key] = data[key];
                return obj;
            }, {});
            window.render(where);
        }
    })
</script>
</body>
</html>
